<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>商品列表</title>
    <link href="/src/image/favicon.ico" type="image/x-icon" rel="icon"/>
    <link href="/src/image/favicon.ico" type="image/x-icon" rel="shortcut icon"/>
    <link rel="stylesheet" href="/src/font/iconfont.css"/>
    <link rel="stylesheet" href="/src/libs/weui.min.css"/>
    <script id="script" src="/src/libs/require.min.js" defer async="true" require-module="./productList"
            data-main="/src/js/config.js"></script>
    <link rel="stylesheet" href="/css/style.css"/>
    <style type="text/css">
        body {
            line-height: normal;
        }

        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .mask {
            position: absolute;
            top: 0px;
            filter: alpha(opacity=60);
            background-color: #777;
            z-index: 500;
            left: 0px;
            opacity: 0.5;
            -moz-opacity: 0.5;
        }

        li {
            list-style-type: none;
        }

        .format-choose:before {
            border-top: none;
        }

        .format-choose .weui-cell {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        #settle_accounts:after {
            border-radius: 0;
        }

        .format-choose .weui-number-input {
            margin: 0 5px;
        }

        .format-choose:after {
            border-bottom: none;
        }

        .searchbar-result:after {
            border-bottom: none;
        }

        #show_goods_list:after {
            border-bottom: none;
        }

        #show_goods_list:before {
            left: 10px;
        }

        .weui-search-bar:after {
            border-bottom: 1px solid #eee;
        }

        .first-category:before {
            left: 0;

        }

        .goodsname {
            font-size: 13px;
        }

        @media screen and (max-width: 320px) {
            .goodsname {
                font-size: 13px;
            }
        }

        #show_first_category li a {
            font-size: 14px;
            color: black;

        }

        #show_first_category li {
            padding: 15px 10px 15px 20px;
        }

        #show_second_category li a {
            color: #666666;
            font-size: 13px;
            display: inline-block;
            height: 22px;
            line-height: 22px;
            vertical-align: middle;
            position: relative;
            z-index: 10;
            transition: all .3s;
        }

        #show_second_category li.active {
            color: #333;
            background: #BBE8D1;
            border-color: #2BC17A;
        }

        #productClass {
            width: 6rem;
            overflow-x: hidden;
            overflow-y: auto;
        }

        #productClass li {
            background: rgba(153, 153, 153, 0.1);
        }

        #show_first_category li.active {
            box-shadow: inset 4px 0 0 0 #2BC17A;
            background: rgba(153, 153, 153, 0);
        }

        #show_first_category li.active a {
            font-size: 14px;
            color: #000;
        }

        #show_first_category {
            transform: translateY(0px);
        }

        #right {
            margin-left: 1px;
            width: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            z-index: 500;

        }

        #show_second_category li {
            float: left;
            margin: 9px;
            border: 1px solid #e5e9ef;
            border-radius: 20px;
            padding: 0 10px;
            position: relative;
            height: 22px;
            transition: all .3s;
        }

        #show_goods_list img {
            width: 54px;
            height: 53px;
            margin: 0 5px;
        }

        .weui_panel {
            background-color: #fff;
            margin-top: 10px;
            position: relative;
            overflow: hidden
        }

        .dropload-up, .dropload-down {
            position: relative;
            height: 0;
            overflow: hidden;
            font-size: 12px;
            /* 开启硬件加速 */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        .dropload-down {
            height: 50px;
        }

        .dropload-refresh, .dropload-update, .dropload-load, .dropload-noData {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        .dropload-load .loading {
            display: inline-block;
            height: 15px;
            width: 15px;
            border-radius: 100%;
            margin: 6px;
            border: 2px solid #666;
            border-bottom-color: transparent;
            vertical-align: middle;
            -webkit-animation: rotate 0.75s linear infinite;
            animation: rotate 0.75s linear infinite;
        }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
            }
            50% {
                -webkit-transform: rotate(180deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .show_goods_list_btn:before {
            border-top: none;
        }

        #subClass:after {
            content: '';
            display: block;
            clear: both;
        }

        .show_goods_list_btn {
            text-align: right;
            padding-right: 0px;
            padding-left: 0;
            font-size: 10px;
            position: absolute;
            right: 15px;
            bottom: 10px;
        }

        @media screen and (max-width: 320px) {
            .show_goods_list_btn {
                left: 58px;
                bottom: -5px;
            }

            #show_goods_list li > div.weui-cell {
                padding-bottom: 25px;
            }
            .show_goods_list_btn .weui-btn_mini{
                margin: inherit;
            }
        }


    </style>
</head>
<body ontouchstart>
<div class="container">
    <div class="page tabbar">
        <div class="page__bd" style="height: 100%">
            <div class="weui-tab">
                <div class="weui-tab__panel" style="padding-bottom: 0">
                    <div class="page__hd">
                        <div class="weui-search-bar" id="searchBar" style="background: #F8F8F8;">
                            <form class="weui-search-bar__form">
                                <div class="weui-search-bar__box">
                                    <i class="weui-icon-search"></i>
                                    <input type="search" class="weui-search-bar__input" id="searchInput"
                                           placeholder="搜索商品"
                                           required=""/>
                                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                                </div>
                                <label class="weui-search-bar__label" id="searchText"> <i
                                        class="weui-icon-search"></i><span>搜索</span> </label>
                            </form>
                            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel"></a>
                        </div>
                    </div>
                    <div class="page__bd">
                        <div class="weui-tab__panel" style="padding-bottom: 0">

                            <div class="weui-flex searchbar-result" id="searchResult">
                                <div id="productClass">
                                    <ul id="show_first_category">
                                        <!--展示商品一级分类-->
                                        <script type="text/html" id="show_first_category-tpl">
                                            {{each firstCategoryDataList as value i}}
                                            <li class="weui-cell first-category" data-type="{{value.categoryId}}">
                                                <a data-type="{{value.categoryId}}" href="javascript:void (0)">{{value.categoryName}}</a>
                                            </li>
                                            {{/each}}
                                        </script>
                                    </ul>
                                </div>
                                <div id="right">
                                    <div id="subClass" style="display: block;">
                                        <ul id="show_second_category">
                                            <!--展示商品二级分类-->

                                        </ul>
                                    </div>
                                    <div class="weui_panel show_goods_container"
                                         style="width: 100%;margin-top: 0;overflow: auto;">


                                        <ul id="show_goods_list" style="min-height: 400px"></ul>
                                        <!--展示商品列表-->
                                    </div>
                                    <!--展示商品列表-->
                                    <script type="text/html" id="show_goods_list-tp1">
                                        {{each goodsDataList as value i}}
                                        <li style="list-style-type:none;">
                                            <div class="weui-cell"
                                                 style="border-bottom: 1px solid #ddd;padding-left: 0px;margin-left: 10px;position: relative;">
                                                <div class="weui-cell__bd">
                                                    <a class="weui-cell weui-cell_access"
                                                       href="/page/productInfo.html?id={{value.goodsId}}"
                                                       style="padding-left: 0;padding-right:0; ">
                                                        <div class="weui-cell__hd">
                                                            <img src="{{value.image[0]}}" alt="">
                                                        </div>
                                                        <div class="weui-cell__bd" style="">
                                                            <p style="margin-bottom: 10px;" class="goodsname"><label>{{value.goodsName}}</label>
                                                            </p>
                                                            <p style="font-size:14px;"><label
                                                                    style="font-size:14px;color: #FF715B;">¥</label><label
                                                                    style="font-size:14px;color: #FF715B;"
                                                                    id="one_retailPrice_{{value.vo_priceId}}">{{value.vo_retailPrice}}</label>
                                                                起
                                                            </p>
                                                        </div>
                                                    </a>
                                                </div>

                                                <div class="weui-cell show_goods_list_btn"
                                                     style="">
                                                    <a href="javascript:;"
                                                       class="weui-btn weui-btn_mini weui-btn_default;"
                                                       style="color: #fff;background: #2BC17A;border-radius: 20px;"
                                                       id="goodsId_{{value.goodsId}}">选规格</a>
                                                    <div class="user-number user-number-sub">
                                                        <img src="/src/image/substact.png"
                                                             id="one_sub_{{value.vo_priceId}}"
                                                             style="display: none;  width: 24px;  height: 24px;">
                                                    </div>
                                                    <input pattern="[0-9]*" class="weui-number-input"
                                                           style="text-align:center;width: 30px; display: none;margin: 0 5px;font-size: initial;margin: 0 5px;border:1px solid #999;border-radius: 0;"
                                                           value="{{value.vo_shoppingCartNum}}"
                                                           id="one_edit_{{value.vo_priceId}}"

                                                           data-min="0"
                                                           data-max="9999"
                                                           data-step="1">

                                                    <div class="user-number user-number-plus">
                                                        <img src="/src/image/add.png" id="one_add_{{value.vo_priceId}}"
                                                             style="display: none;  width: 24px;  height: 24px;">
                                                    </div>
                                                </div>

                                            </div>
                                        </li>
                                        <li style="list-style-type:none">
                                            <div id="show_goods_price_list_{{value.goodsId}}"
                                                 class="weui-cells format-choose"
                                                 style="width: 100%;display:none;margin-top: 0;font-size: 14px;">
                                                <!--  展示规格 -->
                                            </div>
                                        </li>
                                        {{/each}}
                                    </script>
                                    <!--    <div class="weui-loadmore weui-loadmore_line hide" id="noRec">
                                            <span class="weui-loadmore__tips">暂无数据</span>
                                        </div>-->
                                    <!--  <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot" id="cloading">
                                          <span class="weui-loadmore__tips"></span>
                                      </div>-->
                                </div>
                            </div>
                        </div>
                        <div class="weui-tabbar" style=" height:50px;position: relative;bottom: -1px;">
                            <a href="javascript:void(0);" class="weui-tabbar__item weui-bar__item_on"
                               style="background: #fff;position: relative;text-align: left;border-top: 1px solid #ddd;">
                                <p style="position: absolute;left: 80px;top: 16px;font-size:18px;color:#2CC27B;">¥
                                    <label
                                            id="totalNumber" style="font-weight: normal;">0.00</label>
                                </p>
                                <div style="position: absolute;top: 2px;">
                                    <div style="position: relative;margin-left:15px;background: #FF715B; width: 45px;height: 45px;border-radius: 50%;text-align: center">
                                        <img src="/src/image/shop.png" id="shoppingCartDetail"
                                             style="width: 25px;height: 25px;margin-top: 12px;display: inline-block;"/>
                                        <span class="weui-badge"
                                              style="position: absolute;top: 0.5em;left:26px;background: #fff;color: #FF715B;font-size: xx-small;padding: .1em .35em;"
                                              id="totalCategory">0</span>
                                    </div>
                                </div>
                            </a>
                            <a href="/page/order_submit.html" class="weui-btn_primary "
                               style="height:50px;background-color:#CCCCCC;color:#FFF;font-size:14px;border-radius: 0;font-size: 18px;padding-left: 30px;padding-right: 30px;line-height: 3.1;"
                               id="settle_accounts">结算</a>
                        </div>
                    </div>

                </div>
                <!--include "../public/footer.html"-->
            </div>
        </div>

    </div>

</div>

<script type="text/html" id="show_goods_price_list-tpl">
    {{each goodspriceDataList as value i}}
    <li style="margin-left: 10px;background: #F9F9F9;">
        <div class="weui-cell"
             style="margin-left: 10px;padding-left: 0;border-bottom: 1px dotted #eee;padding-top: 10px;padding-bottom: 10px;">
            <div class="weui-cell__hd">
                <p style=""><label style="color: #FF715B;">¥</label><label style="color:  #FF715B;"
                                                                           id="retailPrice_{{value.priceId}}">{{value.retailPrice}}</label><label>/{{value.unitName}}</label>
                </p>
            </div>
            <div class="weui-cell__bd">
                <!--<p><label>&nbsp;</label></p>-->
            </div>
            <div class="weui-cell__ft">
                <div class="weui-cell" style="padding-right: 0;padding-left: 0;">
                    <div class="user-number user-number-sub">
                        <img src="/src/image/substact.png" id="sub_{{value.priceId}}"
                             style="display: block;  width: 24px;  height: 24px;">
                    </div>
                    <input pattern="[0-9]*" class="weui-number-input"
                           style="text-align:center;width: 30px; display: block;margin: 0 5px; font-size: initial;border:1px solid #999;border-radius: 0;"
                           value="{{value.buyPrice}}"
                           id="edit_{{value.priceId}}"
                           data-min="0"
                           data-max="9999"
                           data-step="1">

                    <div class="user-number user-number-plus">
                        <img src="/src/image/add.png" id="add_{{value.priceId}}"
                             style="display: block;  width: 24px;  height: 24px;">
                    </div>
                </div>
            </div>
        </div>
    </li>
    {{/each}}
</script>
<!--展示商品二级分类-->
<script type="text/html" id="show_second_category-tpl">
    {{each secondCategoryDataList as value i}}
    <li data-type="{{value.categoryId}}"><a href="javascript:void (0);">{{value.categoryName}}</a>
    </li>
    {{/each}}
</script>
</body>
</html>